﻿{extend name="common/base"}
{block name="title"}商品详情页{/block}

<body>

{block name="content"}
	<!-- product details -->
	<div class="segments-page">
		<div class="container">
			<div class="product-details">
				<div class="contents">
					<div class="product-d-slide owl-carousel owl-theme">
						{volist name="goods['src']" id="val"}
						<div class="content">							
							<img src="{$val}" alt="">							
						</div>
						{/volist}
					</div>
					<div class="desc-short">
						<form action="" method="POST" id="goods-form">
						<h4>{$goods.name}</h4>
						<div class="row">
							<div class="col s6">
								<select class="browser-default" id="sel1" style="outline-color:transparent;">
									{foreach name="list" id="fo"}
									<option value="{$fo.id}">{$fo.name}</option>
									{/foreach}
								</select>
							</div>
							{if condition="isset($list[0]['son'])"}
							<div class="col s6">
								<select class="browser-default" id="sel2" style="outline-color:transparent;">
									{foreach name="ziguige_list" id="fs"}
									<option value="{$fs.id}">{$fs.name}</option>
									{/foreach}
								</select>
							</div>
							{else /}
							<div class="col s6">
								<select class="browser-default" id="sel2" style="outline-color:transparent;">									
									<option value="">无</option>
								</select>
							</div>
							{/if}
						</div>
						<h5 id="good_price">¥{$price}</h5>
						<!-- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus cum autem illo libero </p> -->
						<button class="button" type="button" onclick="addShoppingcar()"><i class="fa fa-shopping-cart"></i>添加到购物车</button>
						<button class="button" type="button" onclick="getCheckout()" id="subBt" style="margin-left:10px;"><i class="fa fa-send"></i>立即购买</button>
						</form>
						<input type="hidden" value="ok" id="flag">
					</div>
					<!-- <div class="share-media">
						<h5>分享</h5>
						<ul>
							<li><a href=""><i class="fa fa-facebook"></i></a></li>
							<li><a href=""><i class="fa fa-twitter"></i></a></li>
							<li><a href=""><i class="fa fa-google"></i></a></li>
						</ul>
					</div> -->
					<div class="desc-long">
						<h5>描述</h5>
						<p>{$goods.abstract}</p>
					</div>
				</div>
				<div class="review">
					{if ($comment_data==NULL)}
					<h5 id="pinglun-name">该商品暂无评论</h5>
					{else /}
					<h5 id="pinglun-name">评论</h5>
					{/if}
					<div class="comment-people">
						{volist name="comment_data" id="val"}
						<div class="contents" id="comID{$val.id}">
							<div class="icon">
								{if ($val.headimg_url!=NULL)}
								<img src="{$val.headimg_url}" alt="">	
								{elseif ($val.wechat_headimgurl!=NULL)}		
								<img src="{$val.wechat_headimgurl}" alt="">		
								{elseif ($val.weibo_headimgurl!=NULL)}		
								<img src="{$val.weibo_headimgurl}" alt="">						
								{else /}
								<img src="__STATIC__/index/images/moren_headimg.jpg" alt="">
								{/if}
							</div>
							<div class="text">
								<h6>{$val.name}</h6>
								<p class="date">{$val.date}
									{if ($Think.session.id==$val.user_id)}
									<span style="margin-left:10px;color:rgb(61, 61, 161);" onclick="deleteShow(this)">删除
										<input type="hidden" value="{$val.id}">
									</span>
									{/if}
								</p>								
								<p onclick="reply(this)">{if (isset($val.reply_name))}<span>回复<span style="color:rgb(61, 61, 161);">{$val.reply_name} : </span></span>{/if}
									{$val.content}
								</p>
							</div>
						</div>
						{/volist}
						<!-- <div class="contents reply">	<span>回复<span style="color:rgb(61, 61, 161);">ddd测试者 : </span></span>
							<div class="icon">
								<img src="__STATIC__/index/images/comment2.png" alt="">
							</div>
							<div class="text">
								<h6>Jordan <i class="fa fa-bookmark"></i></h6>
								<p class="date">January 10, 2018</p>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
							</div>
						</div> -->	
					</div>
				</div>
				<div class="comment-post">
					<div class="comment-title">
						<h5>发表评论</h5>
					</div>
					<form> 
						<textarea id="comment-content" class="no-mb" cols="30" rows="10" placeholder="发表对商品的评价" style="outline:transparent;"></textarea>
						<button class="button" type="button" id="btSub" onclick="doSubmit();">提交<input type="hidden" value=""></button>
					</form>
				</div>
			</div>
		</div>
	</div>
	<!-- end product details -->
	<div id="showmsg" style="display:none;width: 200px;border-radius: 10px;background: rgba(0,0,0,0.6);height: 100px;position: fixed;top: 50%;left:50%;margin-left: -100px;color: #FFF;text-align: center;line-height: 100px;font-size: 15px;z-index:999;">
	</div>
	<!-- BEGIN 评论删除窗口 --> 
	<div id="deleteCom-box-div" class="">
		<div class="delete-box-item">
			<div class="delete-box-item-title" style="text-align: left;padding-left: 10px;width:100%;height:30%;">亲,确认删除吗?</div>
			<div style="margin-top:5%;height:70%;">
				<button style="width:40%;height:35px;background:rgb(156, 156, 149);color:#fff;" onclick="deleteHide();">我再想想</button>
				<button style="margin-left:5px;width:40%;height:35px;background:rgb(247, 19, 38);color:#fff;" onclick="deleteSure2(this)">确定</button>
			</div>
		</div>
	</div>
	<!-- END 评论删除窗口 -->
{/block}

{block name="footjs"}
<script>
//获取子规格选项
function getSon(id){
	$.ajax({
		url:"{:Url('index/Product/get_sel')}",
		type:"get",
		data:{id:id},
		dataType:"json",//数据通信的类型
		success:function(data){
			// console.log(data);
			if(data.list.son){
				var length = data.list.son.length;
				$("#sel2").empty();
				for(var i=0;i<length;i++){
					$("#sel2").append('<option value="'+data.list.son[i].id+'">'+data.list.son[i].name+'</option>');
				}
			}else{
				$("#sel2").empty();
				$("#sel2").append('<option value="">无</option>');
			}
			$("#good_price").html('¥'+data.price);
		}
	});
}
//获取对应规格商品价格
function getPrice(guigeType_id){
	$.ajax({
		url:"{:Url('index/Product/get_price')}",
		type:"get",
		data:{guigeType_id:guigeType_id},
		dataType:"json",//数据通信的类型
		success:function(data){
			$("#good_price").html('¥'+data.price);
		}
	});
}
$("select#sel1").change(function(){
	getSon($(this).val());
})
$("select#sel2").change(function(){
	getPrice($(this).val());
})
//点击"立即购买"获取对应数据
function getCheckout(){
	if($("#sel2").val()==''){
		var guigetype_id = $("#sel1").val();
		checkKucun(guigetype_id)
	}else{
		var guigetype_id = $("#sel2").val();
		checkKucun(guigetype_id)
	}
	//表示商品还有库存
	if($("#flag").val()=='ok'){
		$("#subBt").attr('type','submit');
		if($("#sel2").val()==''){
			$("#goods-form").attr('action',"{:url('index/cart/checkout')}?guigetype_id="+$("#sel1").val());
		}else{
			$("#goods-form").attr('action',"{:url('index/cart/checkout')}?guigetype_id="+$("#sel2").val());
		}
	}
}
//点击"添加到购物车"获取对应数据
function addShoppingcar(){
	if($("#sel2").val()==''){
		var guigetype_id = $("#sel1").val();
		checkKucun(guigetype_id)
	}else{
		var guigetype_id = $("#sel2").val();
		checkKucun(guigetype_id)
	}
	if($("#flag").val()=='ok'){
		$.ajax({
			url:"{:url('index/cart/add')}",
			type:"post",
			data:{guigetype_id:guigetype_id},
			dataType:"json",
			success:function(data){
				// console.log(data);
				$('#showmsg').html(data.msg);
				$('#showmsg').fadeIn('slow',function(){
					setTimeout(function(){
						$('#showmsg').fadeOut();
					},1000);
				});				
				getShoppingcar();				
			}
		});
	}
}
//检查库存改变flag的状态
$(function(){
	if($("#sel2").val()==''){
		var guigetype_id = $("#sel1").val();
	}else{
		var guigetype_id = $("#sel2").val();
	}
	$.ajax({
		url:"{:url('index/product/checkKucun')}",
		type:"post",
		data:{guigetype_id:guigetype_id},
		dataType:"json",
		success:function(data){
			// console.log(data);
			if(data.data==1){
				$("#flag").val('no');
			}			
		}
	});
})
//检查库存
function checkKucun(guigetype_id){
	$.ajax({
		url:"{:url('index/product/checkKucun')}",
		type:"get",
		data:{guigetype_id:guigetype_id},
		dataType:"json",
		success:function(data){
			// console.log(data);
			$('#showmsg').html(data.msg);
			$('#showmsg').fadeIn('slow',function(){
				setTimeout(function(){
					$('#showmsg').fadeOut();
				},1000);
			});
			$("#flag").val('no');
		}
	});
}
function getShoppingcar(){			
	$.ajax({
		url:"{:url('index/cart/addAfter')}",
		type:"post",
		data:{},
		dataType:"json",
		success:function(data){
			console.log(data);
			$("#slide-out-cart").empty();
			for(var i=0;i<data.length;i++){
				$("#slide-out-cart").append('<div class="content car-goods" id="car'+data[i].car_id+'"><div class="cart-img"><img src="'+data[i].thumb_src[0]+'" alt=""></div><div class="cart-title">'+data[i].name+'<p>'+data[i].first_guige_name+' '+data[i].guigeName+'</p><h5>'+data[i].price+'</h5></div><div class="cart-remove"><i class="fa fa-remove" onclick="showModal(this);" style="cursor:pointer;"><input type="hidden" value="'+data[i].car_id+'"></i></div><div class="clear"></div></div>');
			}			
			$("#slide-out-cart").append('<div class="cart-button"><ul><a href="{:Url("cart/cart")}"><li><button class="button"><i class="fa fa-shopping-cart"></i>查看购物车</button></li></a></ul></div>');		
			var carGoodsNumber = $("#slide-out-cart").find('.car-goods').length;
			if(carGoodsNumber == 1){
				$(".car-number-place").after('<sup style="margin-left:-10px;" id="car-number">1</sup>');
			}else{
				$("#car-number").html(carGoodsNumber);
			}			
		}
	});
}
//评论
var user_id="{:session('id')}";
var goods_id = window.location.search.substring(4);
function doSubmit(){
	var content = $('#comment-content').val();
	$.ajax({
		url:"{:Url('index/product/comment')}",
		type:"post",
		data:{content:content,user_id:user_id,goods_id:goods_id},
		dataType:"json",
		success:function(data){
			// console.log(data);
			$('#showmsg').html(data.msg);
			$('#showmsg').fadeIn('slow',function(){
				setTimeout(function(){
					$('#showmsg').fadeOut();
				},1000);
			});	
			$(".comment-people").empty();
			$("#comment-content").val('');
			$("#pinglun-name").html('评论');
			getCommentList(goods_id);		
		}
	});
}
function getCommentList(goods_id){
	$.ajax({
		url:"{:url('index/product/addAfter')}",
		type:"post",
		data:{goods_id:goods_id},
		dataType:"json",
		success:function(data){
			console.log(data);
			for(var i=0;i<data.length;i++){
				if(data[i].headimg_url!=''){
					if(user_id==data[i].user_id){
						if(!("reply_name" in data[i])){
							$(".comment-people").append('<div class="contents" id="comID'+data[i].id+'"><div class="icon"><img src="'+data[i].headimg_url+'" alt=""></div><div class="text"><h6>'+data[i].name+'</h6><p class="date">'+data[i].date+'<span style="margin-left:10px;color:rgb(61, 61, 161);" onclick="deleteShow(this)">删除<input type="hidden" value="'+data[i].id+'"></span></p><p onclick="reply(this)">'+data[i].content+'</p></div></div>');
						}else{
							$(".comment-people").append('<div class="contents" id="comID'+data[i].id+'"><div class="icon"><img src="'+data[i].headimg_url+'" alt=""></div><div class="text"><h6>'+data[i].name+'</h6><p class="date">'+data[i].date+'<span style="margin-left:10px;color:rgb(61, 61, 161);" onclick="deleteShow(this)">删除<input type="hidden" value="'+data[i].id+'"></span></p><p onclick="reply(this)"><span>回复<span style="color:rgb(61, 61, 161);">'+data[i].reply_name+' : </span></span>'+data[i].content+'</p></div></div>');
						}						
					}else{
						if(!("reply_name" in data[i])){
							$(".comment-people").append('<div class="contents" id="comID'+data[i].id+'"><div class="icon"><img src="'+data[i].headimg_url+'" alt=""></div><div class="text"><h6>'+data[i].name+'</h6><p class="date">'+data[i].date+'</p><p onclick="reply(this)">'+data[i].content+'</p></div></div>');
						}else{
							$(".comment-people").append('<div class="contents" id="comID'+data[i].id+'"><div class="icon"><img src="'+data[i].headimg_url+'" alt=""></div><div class="text"><h6>'+data[i].name+'</h6><p class="date">'+data[i].date+'</p><p onclick="reply(this)"><span>回复<span style="color:rgb(61, 61, 161);">'+data[i].reply_name+' : </span></span>'+data[i].content+'</p></div></div>');
						}						
					}					
				}
				else if(data[i].wechat_headimgurl!=''){
					if(user_id==data[i].user_id){
						if(!("reply_name" in data[i])){
							$(".comment-people").append('<div class="contents" id="comID'+data[i].id+'"><div class="icon"><img src="'+data[i].wechat_headimgurl+'" alt=""></div><div class="text"><h6>'+data[i].name+'</h6><p class="date">'+data[i].date+'<span style="margin-left:10px;color:rgb(61, 61, 161);" onclick="deleteShow(this)">删除<input type="hidden" value="'+data[i].id+'"></span></p><p onclick="reply(this)">'+data[i].content+'</p></div></div>');
						}else{
							$(".comment-people").append('<div class="contents" id="comID'+data[i].id+'"><div class="icon"><img src="'+data[i].wechat_headimgurl+'" alt=""></div><div class="text"><h6>'+data[i].name+'</h6><p class="date">'+data[i].date+'<span style="margin-left:10px;color:rgb(61, 61, 161);" onclick="deleteShow(this)">删除<input type="hidden" value="'+data[i].id+'"></span></p><p onclick="reply(this)"><span>回复<span style="color:rgb(61, 61, 161);">'+data[i].reply_name+' : </span></span>'+data[i].content+'</p></div></div>');
						}						
					}else{
						if(!("reply_name" in data[i])){
							$(".comment-people").append('<div class="contents" id="comID'+data[i].id+'"><div class="icon"><img src="'+data[i].wechat_headimgurl+'" alt=""></div><div class="text"><h6>'+data[i].name+'</h6><p class="date">'+data[i].date+'</p><p onclick="reply(this)">'+data[i].content+'</p></div></div>');
						}else{
							$(".comment-people").append('<div class="contents" id="comID'+data[i].id+'"><div class="icon"><img src="'+data[i].wechat_headimgurl+'" alt=""></div><div class="text"><h6>'+data[i].name+'</h6><p class="date">'+data[i].date+'</p><p onclick="reply(this)"><span>回复<span style="color:rgb(61, 61, 161);">'+data[i].reply_name+' : </span></span>'+data[i].content+'</p></div></div>');
						}						
					}
				}
				else if(data[i].weibo_headimgurl!=''){
					if(user_id==data[i].user_id){
						if(!("reply_name" in data[i])){
							$(".comment-people").append('<div class="contents" id="comID'+data[i].id+'"><div class="icon"><img src="'+data[i].weibo_headimgurl+'" alt=""></div><div class="text"><h6>'+data[i].name+'</h6><p class="date">'+data[i].date+'<span style="margin-left:10px;color:rgb(61, 61, 161);" onclick="deleteShow(this)">删除<input type="hidden" value="'+data[i].id+'"></span></p><p onclick="reply(this)">'+data[i].content+'</p></div></div>');
						}else{
							$(".comment-people").append('<div class="contents" id="comID'+data[i].id+'"><div class="icon"><img src="'+data[i].weibo_headimgurl+'" alt=""></div><div class="text"><h6>'+data[i].name+'</h6><p class="date">'+data[i].date+'<span style="margin-left:10px;color:rgb(61, 61, 161);" onclick="deleteShow(this)">删除<input type="hidden" value="'+data[i].id+'"></span></p><p onclick="reply(this)"><span>回复<span style="color:rgb(61, 61, 161);">'+data[i].reply_name+' : </span></span>'+data[i].content+'</p></div></div>');
						}
						
					}else{
						if(!("reply_name" in data[i])){
							$(".comment-people").append('<div class="contents" id="comID'+data[i].id+'"><div class="icon"><img src="'+data[i].weibo_headimgurl+'" alt=""></div><div class="text"><h6>'+data[i].name+'</h6><p class="date">'+data[i].date+'</p><p onclick="reply(this)">'+data[i].content+'</p></div></div>');
						}else{
							$(".comment-people").append('<div class="contents" id="comID'+data[i].id+'"><div class="icon"><img src="'+data[i].weibo_headimgurl+'" alt=""></div><div class="text"><h6>'+data[i].name+'</h6><p class="date">'+data[i].date+'</p><p onclick="reply(this)"><span>回复<span style="color:rgb(61, 61, 161);">'+data[i].reply_name+' : </span></span>'+data[i].content+'</p></div></div>');
						}						
					}
				}
				else{
					if(user_id==data[i].user_id){
						if(!("reply_name" in data[i])){
							$(".comment-people").append('<div class="contents" id="comID'+data[i].id+'"><div class="icon"><img src="__STATIC__/index/images/moren_headimg.jpg" alt=""></div><div class="text"><h6>'+data[i].name+'</h6><p class="date">'+data[i].date+'<span style="margin-left:10px;color:rgb(61, 61, 161);" onclick="deleteShow(this)">删除<input type="hidden" value="'+data[i].id+'"></span></p><p onclick="reply(this)">'+data[i].content+'</p></div></div>');
						}
						else{
							$(".comment-people").append('<div class="contents" id="comID'+data[i].id+'"><div class="icon"><img src="__STATIC__/index/images/moren_headimg.jpg" alt=""></div><div class="text"><h6>'+data[i].name+'</h6><p class="date">'+data[i].date+'<span style="margin-left:10px;color:rgb(61, 61, 161);" onclick="deleteShow(this)">删除<input type="hidden" value="'+data[i].id+'"></span></p><p onclick="reply(this)"><span>回复<span style="color:rgb(61, 61, 161);">'+data[i].reply_name+' : </span></span>'+data[i].content+'</p></div></div>');
						}						
					}else{
						if(!("reply_name" in data[i])){
							$(".comment-people").append('<div class="contents" id="comID'+data[i].id+'"><div class="icon"><img src="__STATIC__/index/images/moren_headimg.jpg" alt=""></div><div class="text"><h6>'+data[i].name+'</h6><p class="date">'+data[i].date+'</p><p onclick="reply(this)">'+data[i].content+'</p></div></div>');
						}
						else{
							$(".comment-people").append('<div class="contents" id="comID'+data[i].id+'"><div class="icon"><img src="__STATIC__/index/images/moren_headimg.jpg" alt=""></div><div class="text"><h6>'+data[i].name+'</h6><p class="date">'+data[i].date+'</p><p onclick="reply(this)"><span>回复<span style="color:rgb(61, 61, 161);">'+data[i].reply_name+' : </span></span>'+data[i].content+'</p></div></div>');
						}						
					}
				}
			}
		}
	});
}
//回复评论,改变状态
function reply(obj){
	$("#comment-content").attr('placeholder','回复'+$(obj).parent().find('h6').html()+':');
	$("#btSub").attr('onclick','doSubmit2(this)');
	var comment_id = $(obj).parent().parent().attr('id').substring(5);
	$("#btSub").find('input').val(comment_id);
}
//Ajax回复评论
function doSubmit2(obj){
	var content = $('#comment-content').val();
	var comment_id = $(obj).find('input').val();
	$.ajax({
		url:"{:Url('index/product/answer_comment')}",
		type:"post",
		data:{content:content,user_id:user_id,goods_id:goods_id,pid:comment_id},
		dataType:"json",
		success:function(data){
			console.log(data);
			$('#showmsg').html(data.msg);
			$('#showmsg').fadeIn('slow',function(){
				setTimeout(function(){
					$('#showmsg').fadeOut();
				},1000);
			});	
			$(".comment-people").empty();
			$("#comment-content").val('');
			$("#pinglun-name").html('评论');
			getCommentList(goods_id);		
		}
	});
}
//隐藏关闭窗口,方式淡出
function deleteHide()
{
	$('#deleteCom-box-div').fadeOut();
	
}
//打开关闭窗口,方式淡出
function deleteShow(obj)
{
	$('#deleteCom-box-div').fadeIn();
	var comID = $(obj).find('input').val();
	$('#deleteCom-box-div').attr('class','delBox'+comID);
}
//删除评论
function deleteSure2(obj){
	var com_id = $(obj).parent().parent().parent().attr("class").substring(6);
	// alert(com_id);
	$.ajax({
		url:"{:url('index/product/comment_delete')}",
		type:"post",
		data:{com_id:com_id},
		dataType:"json",
		success:function(data){
			console.log(data)
			if(data.data==2){
				$("#comID"+com_id).remove();
				$('#deleteCom-box-div').fadeOut();
				$('#showmsg').html(data.msg);
				$('#showmsg').fadeIn('slow',function(){
					setTimeout(function(){
						$('#showmsg').fadeOut();
					},1000);
				});
			}	
			changeName(goods_id);		
		}
	});
}
//改变评论标题
function changeName(goods_id){
	$.ajax({
		url:"{:url('index/product/addAfter')}",
		type:"post",
		data:{goods_id:goods_id},
		dataType:"json",
		success:function(data){
			console.log(data)
			if(data==''){
				$("#pinglun-name").html('该商品暂无评论');
			}
		}
	});
}
</script>
{/block}
